@split-prefix: ~"w-split";

.@{split-prefix} {
  height: 100%;
  display: flex;
  flex-direction: row;
  &-bar {
    z-index: 1;
    justify-content: center;
    display: flex;
    background: rgb(248, 248, 249);
    &::before, &::after {
      content: '';
      display: block;
    }
    &.disable {
      cursor: not-allowed !important;
    }
    &:hover:not(.disable) {
      transition: background-color .3s;
      background: #ecf7ff;
    }
  }
  &.dragging &-pane {
    position: relative;
    &::before {
      content: '';
      display: block;
      position: absolute;
      height: 100%;
      width: 100%;
      z-index: 1;
    }
  }
  & > &-pane {
    transform: none;
  }
  &:not(.dragging) > &-pane {
    transition: all .3s;
  }
  &-horizontal > &-bar {
    cursor: col-resize;
    width: 5px;
    height: 100%;
    flex-direction: column;
    box-shadow: inset 1px 0 0 0 #d5d5d5, 1px 0 0 0 #d5d5d5;
    &::before, &::after {
      height: 3px;
      width: 100%;
      box-shadow: inset 0 1px 0 0 #d5d5d5, 0 1px 0 0 #d5d5d5;
    }
    &::before {
      margin-top: -1px;
    }
    &::after {
      margin-top: 3px;
    }
    &.disable {
      box-shadow: inset 1px 0 0 0 #e6e6e6, 1px 0 0 0 #eaeaea !important;
    }
  }
  &-vertical {
    flex-direction: column;
  }
  &-vertical > &-bar {
    cursor: row-resize;
    width: 100%;
    height: 5px;
    align-items: center;
    flex-direction: row;
    box-shadow: inset 0 1px 0 0 #d5d5d5, 0 1px 0 0 #d5d5d5;
    &.disable {
      box-shadow: inset 0 1px 0 0 #e6e6e6, 0 1px 0 0 #eaeaea !important;
    }
    &::before, &::after {
      height: 100%;
      width: 3px;
      box-shadow: inset 1px 0 0 0 #d5d5d5, 1px 0 0 0 #d5d5d5;
    }
    &::before {
      margin-left: -1px;
    }
    &::after {
      margin-left: 3px;
    }
  }
  &-vertical > &-line-bar:hover,
  &-horizontal > &-line-bar:hover {
    &::before {
      border-color: #008EF0;
    }
  }
  &-vertical > &-line-bar:hover::before {
    border-top-style: dashed;
  }
  &-horizontal > &-line-bar:hover::before {
    border-left-style: dashed;
  }
  &-vertical > &-line-bar::before {
    width: 100%;
    height: 0;
    border-top: 1px solid #d5d5d5;
    margin-top: 0;
  }
  &-horizontal > &-line-bar::before {
    height: 100%;
    width: 1px;
    border-left: 1px solid #d5d5d5;
    margin-left: 2px;
  }
  &-line-bar {
    box-shadow: inset 0 0 0 0 !important;
    background: transparent;
    &::before {
      box-shadow: inset 0 0 0 0 !important;
    }
    &::after {
      display: none;
    }
  }
}